import { getAppSettingFormItems, getAppSettingFormItemValue, saveAppSetting } from '@/apis/app-manage'
import { KProModal } from '@king-one/antdv'
import { Form, FormItem, Input, message, Spin, Switch } from 'ant-design-vue'
import { ComponentMap } from './AppSetting'

export default defineComponent({
  setup(_, { expose }) {
    const openView = ref(false)
    const loading = ref(false)
    const confirmLoading = ref(false)

    const formState = reactive<any>({})
    const rules = {}

    const formItemRow = ref<any>()

    const formItems = ref<any>()

    const appRow = inject<Ref<any>>('appRow')

    function renderFormItems(item: any) {
      const Component = (ComponentMap as any)[item.type] || Input
      if (Component === Switch) {
        return (
          <Component
            checked={formState[item.key]}
            onUpdate:checked={(value: any) => (formState[item.key] = value)}
            placeholder={item.placeholder || item.label}
            {...item.properties}
          >
          </Component>
        )
      }
      return (
        <Component
          value={formState[item.key]}
          onUpdate:value={(value: any) => (formState[item.key] = value)}
          placeholder={item.placeholder || item.label}
          {...item.properties}
        >
        </Component>
      )
    }

    expose({
      open: async (row: any) => {
        openView.value = true
        formItemRow.value = row
        try {
          formItems.value = null
          loading.value = true
          const res = await getAppSettingFormItems(row.key)
          const defaultValueRes = await getAppSettingFormItemValue(appRow?.value.appId || '', row.key)
          formItems.value = res.data
          formItems.value.elements.forEach((ele: any) => {
            (formState as any)[ele.key] = defaultValueRes.data[ele.key] || ele.defaultValue
          })
        }
        finally {
          loading.value = false
        }
      },
    })

    async function onSubmit() {
      try {
        confirmLoading.value = true
        const res = await saveAppSetting({ appId: appRow?.value.appId, settingKey: formItemRow.value.key, settingValue: formState })
        if (res.status === 0) {
          message.success('保存成功')
          openView.value = false
        }
      }
      finally {
        confirmLoading.value = false
      }
    }

    return () => (
      <KProModal
        title="配置项编辑"
        modelValue={openView.value}
        onUpdate:modelValue={value => (openView.value = value)}
        onOnConfirm={onSubmit}
        modal-props={{
          confirmLoading: confirmLoading.value,
        }}
      >
        <Spin spinning={loading.value}>
          <Form ref="formRef" style={{ minHeight: '100px' }} labelCol={{ span: 5 }} model={formState} rules={rules}>
            {
              formItems.value?.elements.map((ele: any) => {
                return (
                  <>
                    <FormItem label={ele.label} name={ele.key}>
                      {renderFormItems(ele)}
                    </FormItem>
                  </>
                )
              })
            }
          </Form>
        </Spin>
      </KProModal>
    )
  },
})
